<template>
  <div class="app-container machine-info">
    <div class="machine-info-header">
      <el-button type="primary" size="mini" @click="dialog.createMachineInfo = true">新增机器</el-button>
    </div>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        label="机器IP">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.hostip }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="机器名">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.hostname }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="机器规格">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.machine_type }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="pai-master">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.pai_master === 'true' ? '是' : '否' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="pai-worker">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.pai_worker === 'true' ? '是' : '否' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="SSH端口">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.sshport }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="登录用户名">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.username }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="size"
        label="操作"
        width="80">
        <template slot-scope="scope">
          <a class="table-action" @click="clickDeleteMachineInfo(scope.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialog.createMachineInfo"
      :title="dialog.editMachineInfo ? '修改规格' : '新增规格'"
      width="500px"
      @close="resetForm('createMachineInfoForm')">
      <el-form ref="createMachineInfoForm" :model="createMachineInfoForm" :rules="rulesCreateMachineInfo" label-width="120px">
        <el-form-item label="机器名：" prop="hostname">
          <el-input v-model="createMachineInfoForm.hostname" />
        </el-form-item>
        <el-form-item label="机器IP：" prop="hostip">
          <el-input v-model="createMachineInfoForm.hostip" />
        </el-form-item>
        <el-form-item label="SSH端口：" prop="sshport">
          <el-input v-model="createMachineInfoForm.sshport" />
        </el-form-item>
        <el-form-item label="登录用户名：" prop="username">
          <el-input v-model="createMachineInfoForm.username" />
        </el-form-item>
        <el-form-item label="登录密码：" prop="password">
          <el-input v-model="createMachineInfoForm.password" type="password" auto-complete="new-password"/>
        </el-form-item>
        <el-form-item label="机器规格：" prop="machine_type">
          <el-select v-model="createMachineInfoForm.machine_type" placeholder="请选择">
            <el-option
              v-for="item in machineOptions"
              :key="item.sku_name"
              :label="item.sku_name"
              :value="item.sku_name" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialog.createMachineInfo = false; dialog.editMachineInfo = false;">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('createMachineInfoForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { handleMachineInfo, handleMachineSpecification } from '@/api/machine'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      selCluster: '',
      clusterOptions: [],
      // 总页数
      totalPage: 0,
      // 每页条数
      pageSize: 20,
      // 当前页
      pageNumber: 1,
      dialog: {
        createMachineInfo: false,
        editMachineInfo: false
      },
      createMachineInfoForm: {
        hostname: '',
        hostip: '',
        sshport: '',
        username: '',
        password: '',
        machine_type: ''
      },
      rulesCreateMachineInfo: {
        hostname: [
          { required: true, message: '请输入机器名', trigger: 'blur' }
        ],
        hostip: [
          { required: true, message: '请输入机器IP', trigger: 'blur' }
        ],
        sshport: [
          { required: true, message: '请输入SSH端口', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入登录用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        machine_type: [
          { required: true, message: '请选择机器规格', trigger: 'blur' }
        ]
      },
      machineOptions: []
    }
  },
  created() {
    this._handleMachineInfo('Get')
    this._getMachineType()
  },
  methods: {
    // 删除用户
    clickDeleteMachineInfo(row) {
      this.$confirm(`此操作将删除机器${row.sku_name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          hostip: row.hostip
        }
        this._handleMachineInfo('Delete', data)
      })
    },
    // 表单提交(createMachineInfoForm: 新增规格)
    submitForm() {
      const method = this.dialog.editMachineInfo ? 'Put' : 'Post'
      this.$refs['createMachineInfoForm'].validate((valid) => {
        if (valid) {
          const data = {
            hostname: this.createMachineInfoForm.hostname,
            hostip: this.createMachineInfoForm.hostip,
            sshport: this.createMachineInfoForm.sshport,
            username: this.createMachineInfoForm.username,
            password: this.createMachineInfoForm.password,
            machine_type: this.createMachineInfoForm.machine_type
          }
          this._handleMachineInfo(method, data)
          this.resetForm('createMachineInfoForm')
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm(formName) {
      this.dialog.editMachineInfo = false
      this.dialog.createMachineInfo = false
      this.createUserForm = {
        skuName: '',
        gpuType: '',
        gpuCount: '',
        cpuVcores: '',
        memory: ''
      }
      this.$refs[formName].resetFields()
    },
    // 机器信息操作（查询列表：Get,新增：Post,修改：Put,删除：Delete）
    _handleMachineInfo(method, data) {
      this.listLoading = true
      handleMachineInfo(method, data).then(res => {
        this.listLoading = false
        if (res.message.code === 0) {
          switch (method) {
            case 'Get':
              this.list = res.data
              break
            case 'Post':
              this.$message({ message: '新建成功', showClose: true, type: 'success' })
              this._handleMachineInfo('Get')
              break
            case 'Put':
              this.$message({ message: '修改成功', showClose: true, type: 'success' })
              this._handleMachineInfo('Get')
              break
            case 'Delete':
              this.$message({ message: '删除成功', showClose: true, type: 'success' })
              this._handleMachineInfo('Get')
              break
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 查询机器类型
    _getMachineType() {
      handleMachineSpecification('Get').then(res => {
        this.listLoading = false
        if (res.message.code === 0) {
          this.machineOptions = res.data
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.machine-info {
  &-header {
    padding: 10px;
    background: #ffffff;
    font-size: 14px;
    color: #303133;
    font-weight: bold;
    .header-title {
      font-size: 14px;
      font-weight: 700;
    }
  }
  label {
    font-weight: normal
  }
  .table-action {
    color: #4285f4;
  }
  .table-link {
    &:hover {
      color: #4285f4;
    }
  }
}
</style>
